<!--
  Generated template for the UserInfoEditPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar no-border-bottom color="primary">
    <ion-title>个人资料</ion-title>
    <ion-buttons right>
      <button ion-button icon-only color="royal" (click)="save()">
        <ion-icon name="checkmark"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content padding>

  <form [formGroup]="myForm" (ngSubmit)="save()">
  <ion-list>
    <ion-item>
      <ion-label fixed>昵称</ion-label>
      <ion-input formControlName="nickName" type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>性别</ion-label>
      <ion-select formControlName="gender" clearInput>
        <ion-option value="1">男</ion-option>
        <ion-option value="2">女</ion-option>
        <ion-option value="0">保密</ion-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label fixed>手机</ion-label >
      <ion-input formControlName="mobileNumber" type="text" clearInput></ion-input>
    </ion-item>
    <!--<p [hidden]="!myForm.hasError('phone','mobileNumber')&&!myForm.hasError('rangeLength','mobileNumber')">手机号格式不正确</p>-->
    <ion-item>
      <ion-label fixed>邮箱</ion-label>
      <ion-input formControlName="mail" type="email" clearInput></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>生日</ion-label>
      <ion-datetime formControlName="birthday" clearInput displayFormat="YYYY-MM-DD" pickerFormat="YYYY MM DD" placeholder="未设置" [cancelText]="'取消'" [doneText]="'完成'"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label fixed>地区</ion-label>
      <ion-multi-picker item-content formControlName="cityCode" [multiPickerColumns]="cityColumns" [cancelText]="'取消'" [doneText]="'完成'"></ion-multi-picker>
    </ion-item>
  </ion-list>

    <!--<button ion-button type="submit" [disabled]="!myForm.valid">保存</button>-->
  </form>

<!--  <p>Form value: {{ myForm.value | json }}</p>
  <p>Form status: {{ myForm.status | json }}</p>-->
<!--  <p>mobileNumber errors: {{ myForm.get('mobileNumber').errors | json }}</p>
  <p>phone: {{ myForm.hasError('phone','mobileNumber') }}</p>
  <p>rangeLength: {{ myForm.hasError('rangeLength','mobileNumber') }}</p>-->
  <!--<div padding>-->
    <!--<button block>保存</button>-->
  <!--</div>-->

</ion-content>
